panel: Add rounded corners

Current mockups show the panel curving downwards at the edges to
frame the work area and look awesome. Implement those as separate
actors to not affect the struts set by the panel, and synchronize
their state with the corresponding panel buttons so they blend in
with the panel. It might be worth considering whether the corners
should be hidden with maximized windows on the current workspace,
though this might affect the illusion of them being part of the
panel. As the corners don't affect the input region, the small
overlap with windows might not be too bad after all.

https://bugzilla.gnome.org/show_bug.cgi?id=642697

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 0bd1566b62d78856a59be3b28f628f15c6bfe0d8..843587baff3afc735f2a88a5559ded25637ad827 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -210,6 +210,21 @@ StTooltip StLabel {
     padding-right: 4px;
 }
 
+.panel-corner {
+    -panel-corner-radius: 10px;
+    -panel-corner-background-color: black;
+    -panel-corner-inner-border-width: 2px;
+    -panel-corner-inner-border-color: transparent;
+    -panel-corner-outer-border-width: 1px;
+    -panel-corner-outer-border-color: #536272;
+}
+
+.panel-corner:active,
+.panel-corner:checked,
+.panel-corner:focus {
+    -panel-corner-inner-border-color: rgba(255,255,255,0.8);
+}
+
 #appMenu {
     spacing: 4px;
 }

diff --git a/js/ui/panel.js b/js/ui/panel.js
index 41bb04486d1cac69a3934a47c12235b6f52f08eb..c1da9e4f1ff0e0c02f3e04f64e3f126e05bfeea1 100644 (file)
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -1,5 +1,6 @@
 /* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */
 
+const Cairo = imports.cairo;
 const Clutter = imports.gi.Clutter;
 const Gio = imports.gi.Gio;
 const Lang = imports.lang;
@@ -50,6 +51,51 @@ const CLOCK_FORMAT_KEY        = 'clock-format';
 const CLOCK_SHOW_DATE_KEY     = 'show-date';
 const CLOCK_SHOW_SECONDS_KEY  = 'show-seconds';
 
+
+// To make sure the panel corners blend nicely with the panel,
+// we draw background and borders the same way, e.g. drawing
+// them as filled shapes from the outside inwards instead of
+// using cairo stroke(). So in order to give the border the
+// appearance of being drawn on top of the background, we need
+// to blend border and background color together.
+// For that purpose we use the following helper methods, taken
+// from st-theme-node-drawing.c
+function _norm(x) {
+    return Math.round(x / 255);
+}
+
+function _over(srcColor, dstColor) {
+    let src = _premultiply(srcColor);
+    let dst = _premultiply(dstColor);
+    let result = new Clutter.Color();
+
+    result.alpha = src.alpha + _norm((255 - src.alpha) * dst.alpha);
+    result.red = src.red + _norm((255 - src.alpha) * dst.red);
+    result.green = src.green + _norm((255 - src.alpha) * dst.green);
+    result.blue = src.blue + _norm((255 - src.alpha) * dst.blue);
+
+    return _unpremultiply(result);
+}
+
+function _premultiply(color) {
+    return new Clutter.Color({ red: _norm(color.red * color.alpha),
+                               green: _norm(color.green * color.alpha),
+                               blue: _norm(color.blue * color.alpha),
+                               alpha: color.alpha });
+};
+
+function _unpremultiply(color) {
+    if (color.alpha == 0)
+        return new Clutter.Color();
+
+    let red = Math.min((color.red * 255 + 127) / color.alpha, 255);
+    let green = Math.min((color.green * 255 + 127) / color.alpha, 255);
+    let blue = Math.min((color.blue * 255 + 127) / color.alpha, 255);
+    return new Clutter.Color({ red: red, green: green,
+                               blue: blue, alpha: color.alpha });
+};
+
+
 function AnimatedIcon(name, size) {
     this._init(name, size);
 }
@@ -504,6 +550,95 @@ AppMenuButton.prototype = {
 
 Signals.addSignalMethods(AppMenuButton.prototype);
 
+
+function PanelCorner(side) {
+    this._init(side);
+}
+
+PanelCorner.prototype = {
+    _init: function(side) {
+        this._side = side;
+        this.actor = new St.DrawingArea({ style_class: 'panel-corner' });
+        this.actor.connect('repaint', Lang.bind(this, this._repaint));
+        this.actor.connect('style-changed', Lang.bind(this, this._reposition));
+    },
+
+    _repaint: function() {
+        let node = this.actor.get_theme_node();
+
+        let cornerRadius = node.get_length("-panel-corner-radius");
+        let innerBorderWidth = node.get_length('-panel-corner-inner-border-width');
+        let outerBorderWidth = node.get_length('-panel-corner-outer-border-width');
+
+        let backgroundColor = node.get_color('-panel-corner-background-color');
+        let innerBorderColor = node.get_color('-panel-corner-inner-border-color');
+        let outerBorderColor = node.get_color('-panel-corner-outer-border-color');
+
+        let cr = this.actor.get_context();
+        cr.setOperator(Cairo.Operator.SOURCE);
+
+        cr.moveTo(0, 0);
+        if (this._side == St.Side.LEFT)
+            cr.arc(cornerRadius,
+                   innerBorderWidth + outerBorderWidth + cornerRadius,
+                   cornerRadius, Math.PI, 3 * Math.PI / 2);
+        else
+            cr.arc(0,
+                   innerBorderWidth + outerBorderWidth + cornerRadius,
+                   cornerRadius, 3 * Math.PI / 2, 2 * Math.PI);
+        cr.lineTo(cornerRadius, 0);
+        cr.closePath();
+
+        let savedPath = cr.copyPath();
+
+        let over = _over(outerBorderColor, backgroundColor);
+        Clutter.cairo_set_source_color(cr, over);
+        cr.fill();
+
+        let xOffsetDirection = this._side == St.Side.LEFT ? -1 : 1;
+        let offset = outerBorderWidth;
+        over = _over(innerBorderColor, backgroundColor);
+        Clutter.cairo_set_source_color(cr, over);
+
+        cr.save();
+        cr.translate(xOffsetDirection * offset, - offset);
+        cr.appendPath(savedPath);
+        cr.fill();
+        cr.restore();
+
+        if (this._side == St.Side.LEFT)
+            cr.rectangle(cornerRadius - offset, 0, offset, innerBorderWidth);
+        else
+            cr.rectangle(0, 0, offset, innerBorderWidth);
+        cr.fill();
+
+        offset = innerBorderWidth + outerBorderWidth;
+        Clutter.cairo_set_source_color(cr, backgroundColor);
+
+        cr.save();
+        cr.translate(xOffsetDirection * offset, - offset);
+        cr.appendPath(savedPath);
+        cr.fill();
+        cr.restore();
+    },
+
+    _reposition: function() {
+        let node = this.actor.get_theme_node();
+
+        let cornerRadius = node.get_length("-panel-corner-radius");
+        let innerBorderWidth = node.get_length('-panel-corner-inner-border-width');
+        let outerBorderWidth = node.get_length('-panel-corner-outer-border-width');
+
+        this.actor.set_size(cornerRadius,
+                            innerBorderWidth + outerBorderWidth + cornerRadius);
+        if (this._side == St.Side.LEFT)
+            this.actor.set_position(0, Main.panel.actor.height - innerBorderWidth - outerBorderWidth);
+        else
+            this.actor.set_position(Main.panel.actor.width - cornerRadius, Main.panel.actor.height - innerBorderWidth - outerBorderWidth);
+    }
+};
+
+
 function Panel() {
     this._init();
 }
@@ -535,6 +670,9 @@ Panel.prototype = {
             this._rightBox.add_style_pseudo_class('rtl');
         }
 
+        this._leftCorner = new PanelCorner(St.Side.LEFT);
+        this._rightCorner = new PanelCorner(St.Side.RIGHT);
+
         /* This box container ensures that the centerBox is positioned in the *absolute*
          * center, but can be pushed aside if necessary. */
         this._boxContainer = new Shell.GenericContainer();
@@ -651,6 +789,15 @@ Panel.prototype = {
             });
         this._leftBox.add(this.button);
 
+        // Synchronize the buttons pseudo classes with its corner
+        this.button.connect('style-changed', Lang.bind(this,
+            function(actor) {
+                let rtl = actor.get_direction() == St.TextDirection.RTL;
+                let corner = rtl ? this._rightCorner : this._leftCorner;
+                let pseudoClass = actor.get_style_pseudo_class();
+                corner.actor.set_style_pseudo_class(pseudoClass);
+            }));
+
         // We use this flag to mark the case where the user has entered the
         // hot corner and has not left both the hot corner and a surrounding
         // guard area (the "environs"). This avoids triggering the hot corner
@@ -727,6 +874,15 @@ Panel.prototype = {
         this._menus.addMenu(this._statusmenu.menu);
         this._rightBox.add(this._statusmenu.actor);
 
+        // Synchronize the buttons pseudo classes with its corner
+        this._statusmenu.actor.connect('style-changed', Lang.bind(this,
+            function(actor) {
+                let rtl = actor.get_direction() == St.TextDirection.RTL;
+                let corner = rtl ? this._leftCorner : this._rightCorner;
+                let pseudoClass = actor.get_style_pseudo_class();
+                corner.actor.set_style_pseudo_class(pseudoClass);
+            }));
+
         Main.statusIconDispatcher.connect('status-icon-added', Lang.bind(this, this._onTrayIconAdded));
         Main.statusIconDispatcher.connect('status-icon-removed', Lang.bind(this, this._onTrayIconRemoved));
 
@@ -753,6 +909,12 @@ Panel.prototype = {
         }));
 
         Main.chrome.addActor(this.actor, { visibleInOverview: true });
+        Main.chrome.addActor(this._leftCorner.actor, { visibleInOverview: true,
+                                                 affectsStruts: false,
+                                                 affectsInputRegion: false });
+        Main.chrome.addActor(this._rightCorner.actor, { visibleInOverview: true,
+                                                  affectsStruts: false,
+                                                  affectsInputRegion: false });
     },
 
     _xdndShowOverview: function (actor) {